;(function () {
    // DOM
    var oInput = document.getElementById('input'),
        oDropdown = document.getElementById('dropdown'),
        oButton = document.getElementById('button'),
        oSearchTypes = document.getElementById('searchTypes'),
        oFirstTools = document.getElementById('firstTools'),
        oSecondTools = document.getElementById('secondTools'),
        oThirdTools = document.getElementById('thirdTools')
    ;

    // Variables
    var activeIndex = 0;

    // Search Types Links
    var searchTypes = [
        {title: 'Magi', link: 'https://magi.com/search?q='},
        {title: '多吉', link: 'https://www.dogedoge.com/results?q='},
        {title: '谷歌', link: 'https://www.google.com/search?q='},
        {title: '秘迹', link: 'https://mijisou.com/?category_general=on&time_range=&language=zh-CN&pageno=1&q='},
        {title: '百度', link: 'https://www.baidu.com/baidu?ie=utf-8&wd='},
        {title: '必应', link: 'https://cn.bing.com/search?q='},
        {title: '搜狗', link: 'https://www.sogou.com/web?query='},
        {title: '微信', link: 'https://weixin.sogou.com/weixin?type=2&ie=utf8&query='},
    ];

    var firstTools = [
        {
            title: '购物',
            list: [
                {title: '京东', link: 'https://www.jd.com/'},
                {title: '淘宝', link: 'https://www.taobao.com/'},
                {title: '天猫', link: 'https://www.tmall.com/'},
            ]
        },
        {
            title: '常用工具',
            list: [
                {title: '百度云盘', link: 'https://pan.baidu.com/'},
                {title: '亿图在线作图', link: 'https://www.edrawmax.cn/'}
            ]
        },
    ]

    var secondTools = [
        {
            title: '视频学习',
            list: [
                {title: 'Bilibili', link: 'https://www.bilibili.com/'},
                {title: '网易公开课', link: 'https://open.163.com/'},
                {title: '爱奇艺', link: 'https://www.iqiyi.com/'},
                {title: '优酷', link: 'https://www.youku.com/'},
                {title: '腾讯视频', link: 'https://v.qq.com/'},
            ]
        },
    ]

    var thirdTools = [
        {
            title: '兴趣社区',
            list: [
                {title: '知乎', link: 'https://www.zhihu.com/'},
                {title: '豆瓣', link: 'https://www.douban.com/'},
                {title: '简书', link: 'https://www.jianshu.com/'},
            ]
        },
        {
            title: '工作',
            list: [
                {title: '腾讯文档', link: 'https://docs.qq.com/desktop'},
                {title: '品智OA系统', link: 'http://cncoa.cn:92/'}
            ]
        },
    ]

    // utils  
    var bindEvent = (function () {
        if (window.addEventListener) {
            return function (el, type, fn) {
                el.addEventListener(type, fn, false);
            }
        } else {
            return function (el, type, fn) {
                el.attachEvent('on' + type, fn);
            }
        }
    })();

    init();

    function init() {
        // load search data element
        initSearchTypes();

        // load tools data element
        initTools(firstTools, oFirstTools);
        initTools(secondTools, oSecondTools);
        initTools(thirdTools, oThirdTools);

        // load search type by localstorage,remember your last select
        initSearchTypeByLocalStorage();

        // binding event
        initEvent();
    }

    function initSearchTypes() {
        for (var i = 0, len = searchTypes.length; i < len; i++) {
            var a = document.createElement('a');
            if (i === activeIndex) {
                a.className = 'search-type active';
            } else {
                a.className = 'search-type';
            }
            a.innerHTML = searchTypes[i].title;
            a.setAttribute('data-index', i);
            oSearchTypes.appendChild(a);
        }
    }

    function initTools(data = [], _html = HTMLElement) {
        for (var i = 0, lenOne = data.length; i < lenOne; i++) {

            var toolTitle = data[i].title;
            var toolItems = data[i].list;

            var toolBoxDiv = document.createElement('div');
            toolBoxDiv.className = "tool-box-div";

            var divTitle = document.createElement('div');
            divTitle.className = "tool-title";
            divTitle.innerText = toolTitle;
            toolBoxDiv.appendChild(divTitle);

            for (var j = 0, lenTwo = toolItems.length; j < lenTwo; j++) {

                var toolItem = document.createElement("div");
                toolItem.className = "tool-item";
                var toolItemSpan = document.createElement('span');
                toolItemSpan.innerText = "*";

                var toolItemA = document.createElement('a');
                toolItemA.href = toolItems[j].link;
                toolItemA.target = "_blank";
                toolItemA.className = "tool-item-link";
                toolItemA.innerText = toolItems[j].title;

                toolItem.appendChild(toolItemSpan);
                toolItem.appendChild(toolItemA);

                toolBoxDiv.appendChild(toolItem);
            }
            _html.appendChild(toolBoxDiv);
        }
    }

    function initEvent() {
        // Show Tips When Input.
        bindEvent(oInput, 'keyup', function (e) {
            var ev = e || window.event;
            var target = e.target || ev.srcElement;
            var val = target.value;
            if (e.keyCode === 13) {
                executeSearch(val);
            } else {
            }
        });
        // Hide Tips When Click Document.
        bindEvent(document, 'click', function (e) {
            var ev = e || window.event;
            var target = e.target || ev.srcElement;
            if (target.className === 'search-type') {
                changeSearchType(target);
            }
        });
        // Click Search Button to Search
        bindEvent(oButton, 'click', function (e) {
            executeSearch(oInput.value);
        })
    }

    function executeSearch(keywords) {
        if (keywords) {
            var link = searchTypes[activeIndex].link + keywords;
            window.location.href = link;
        }
    }

    function changeSearchType(el) {
        var className = el.className;
        if (className.indexOf('active') > -1) return;
        el.className = className + ' active';
        activeIndex = el.getAttribute('data-index');

        window.localStorage.setItem("SearchTypeOnActiveIndex", activeIndex);

        var parentNode = el.parentNode;
        for (var i = 0; i < parentNode.children.length; i++) {
            var childEl = parentNode.children[i]
            if (childEl === el) continue;
            if (childEl.className.indexOf('active') > -1) {
                childEl.className = className;
            }
        }
    }

    function initSearchTypeByLocalStorage() {
        var str = window.localStorage.getItem("SearchTypeOnActiveIndex");
        if (str) {
            activeIndex = parseInt(str);
            oSearchTypes.childNodes[activeIndex].className = 'search-type active';

            for (var i = 0; i < oSearchTypes.children.length; i++) {
                var childEl = oSearchTypes.children[i]
                if (childEl === oSearchTypes.childNodes[activeIndex]) continue;
                if (childEl.className.indexOf('active') > -1) {
                    childEl.className = 'search-type';
                }
            }
        }
    }
})();